class ViewModel{
    //表尾添加一行
    pushRowInfo(RowInfo) {
        var data=Rowinfo.getlocal();
        var max=window.maxnum(data);
        max+=1;
        data.push({id:max,attribute:"text行内文本1"});
        Rowinfo.setlocal(data);
        window.reWrite();
    }
    //表头添加一行
    unshiftRowInfo(RowInfo){
        var data=Rowinfo.getlocal();
        var max=window.maxnum(data);
        max+=1;
        data.unshift({id:max,attribute:"text行内文本1"});
        Rowinfo.setlocal(data);
        window.reWrite();
    }
    replaceRowInfo(index,RowInfo){

    }
}
class RowInfo{
    getlocal(){
        if(window.localStorage.info){
            return JSON.parse(window.localStorage.info);
        }else{
            return [];
        }
    };
    setlocal(attr){
        window.localStorage.info
            =JSON.stringify(attr);
    }
}
let operate=document.querySelector("#operate");
let hides=document.querySelector(".hides");
let parent=document.querySelector('tbody');
let pushRow=document.querySelector('.pushRow');
let unshiftRow=document.querySelector('.unshiftRow');
var th=document.querySelector('.th');
//var RowInfo=[{name:"zhao",age:17,sex:"男"}];
let index=0;
var viewModel=new ViewModel();
var Rowinfo=new RowInfo();
function maxnum(data){
    console.log(data);
    var num=-1;
    data.forEach(function(v,i){
        if(num<v.id){
            num=v.id;
        }
    });
    return num;
}
function reWrite() {
    parent.innerHTML="";
    let tr=document.querySelectorAll('tr');
    var data=Rowinfo.getlocal();
    var str="";
    data.forEach(function(v,i){
        str+="<option value="+v.id+">"+v.id+"</option>";
    })
    data.forEach(function (v,i) {
        let newtr=document.createElement("tr");
        // newtr.id=i;
        newtr.innerHTML="<td>"+v.id+"</td><td contenteditable='true'>"+v.attribute+"</td><td><button id="+v.id+" class='btn btn-info del'>删除</button><select class='btn btn-info replaceRow'><option value=''>替换为</option>"+str+"</select></td>";
        parent.appendChild(newtr);
    });
}
reWrite();

{
    operate.onmousemove=function () {
        hides.style.opacity=1;
    };
    operate.onmouseout=function () {
        hides.style.opacity=0;
    };

    pushRow.onclick=function(){
        viewModel.pushRowInfo()
    };

    unshiftRow.onclick=function () {
        viewModel.unshiftRowInfo()

    };
    var replaceRow=document.querySelector('.replaceRow');
    if(replaceRow){
        replaceRow.onclick=function () {
            var tr=document.querySelectorAll('tr');
            tr.forEach(function (v,i) {

            })
        };
    }


    //删除
    parent.onclick=function(e){
        let target=e.target;//事件委派
        var data=Rowinfo.getlocal();
        data.forEach(function(v,i){
            if(target.id==v.id){
                console.log(v.id);
                if(confirm("确定删除么")){
                    console.log(v.id);
                    v.id=null;
                    console.log(typeof v.id);
                    data=data.filter((v)=>typeof v.id!=="object");
                    Rowinfo.setlocal(data);
                    parent.removeChild(target.parentNode.parentNode)
                }
            }
        })

    }


}